<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>历史数据</title>
    <link rel="stylesheet" href="/stylesheets/style.css">
    <link rel="stylesheet" href="/stylesheets/calendar.css">
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <script src="/javascripts/scripts.js"></script>
    <script src="https://cdn.bootcss.com/echarts/4.7.0/echarts.min.js"></script>
</head>
<div>
</div>
<div id="calendar" class="calendar"></div>

<div id="test" style="position:absolute;left:200px;top:20px;font-size:24px;">日期:</div>
<div id="main" style="width:560px;height:540px;position:absolute;top:60px;left:10px"></div>
<div class="show_tips">
    说明:<br>
    1、点击日历上的日期,查看想看的数据<br>
    2、数据显示方式为雷达图<br>
    3、数据重叠,点击指定的监测点图标取消显示<br>
    4、数据保存长度为15天<br>
</div>
<div id="show_content" style="position:absolute;font-size:30px;left:30px;top:300px;font-size:40px;"></div>
</body>
<script>
    $.get('http://localhost:80/history_data', function (res) {
                var newdate= new Date();
                var newmonth = newdate.getMonth()+1;
                var newday = newdate.getDate();
                if(newmonth<10) newmonth = "0"+newmonth;
                if(newday<10)   newday   = "0"+newday;
                document.getElementById("test").innerHTML="日期:&emsp;2021"+newmonth+newday;
                var myChart = echarts.init(document.getElementById('main'));
                document.getElementById('show_content').innerHTML = "";


                var radar_data = new Array();
                for(var i=0;i<6;i++){
                    radar_data[i] = new Array(6);
                }

                for(var i=0;i<6;i++){
                    radar_data[i][0] = res[i].co_24h;
                    radar_data[i][1] = res[i].o3_24h;
                    radar_data[i][2] = res[i].pm10_24h;
                    radar_data[i][3] = res[i].pm2_5_24h;
                    radar_data[i][4] = res[i].so2_24h;
                    radar_data[i][5] = res[i].aqi;
                }
                option = {
                tooltip: {},
                legend: {
                    data: ["彩香幼儿园","上方山","北库轧钢厂","采莲商业广场","红庄","木渎中学"]
                },
                radar: {
                    // shape: 'circle',
                    name: {
                        textStyle: {
                            color: '#fff',
                            backgroundColor: '#999',
                            borderRadius: 3,
                            padding: [3, 5]
                        }
                    },
                    indicator: [
                        { name: 'CO2含量'},
                        { name: 'O3含量'},
                        { name: 'PM10含量'},
                        { name: 'PM2.5含量'},
                        { name: 'SO2含量'},
                        { name: 'AQI质量'}
                    ]
                },
                series: [{
                    type: 'radar',
                    // areaStyle: {normal: {}},
                    data: [
                        {
                            value: radar_data[0],
                            name: '彩香幼儿园'
                        },
                        {
                            value: radar_data[1],
                            name: '上方山'
                        },
                        {
                            value: radar_data[2],
                            name: '北库轧钢厂'
                        },
                        {
                            value: radar_data[3],
                            name: '采莲商业广场'
                        },
                        {
                            value: radar_data[4],
                            name: '红庄'
                        },
                        {
                            value: radar_data[5],
                            name: '木渎中学'
                        }
                    ]
                }]
            };
            myChart.setOption(option);
    })
</script>
</html>